/*
 * @Author: byron
 * @Date: 2022-01-12 00:40:18
 * @LastEditTime: 2022-02-04 21:52:54
 */

const CompressionPlugin = require('compression-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production'
const cdn = {
    css: [],
    js: [
        'https://cdn.staticfile.org/vue/2.6.11/vue.js',
        'https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js',
        'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
        'https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
    ],
}

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    productionSourceMap: false,
    chainWebpack: (config) => {
        config.plugins.delete('prefetch')

        config.plugin('html').tap((args) => {
            args[0].title = '欢迎来到我的个人网站'
            return args
        })
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入cdn
            config.plugin('html').tap((args) => {
                args[0].cdn = cdn
                return args
            })
        }
    },
    configureWebpack: (config) => {
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                vue: 'Vue',
                vuex: 'Vuex',
                'vue-router': 'VueRouter',
                axios: 'axios',
            }
            config.mode = 'production'
            config['performance'] = {
                //打包文件大小配置
                maxEntrypointSize: 10000000,
                maxAssetSize: 30000000,
            }
            // 为生产环境修改配置...
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/, //匹配文件名
                        threshold: 10240, //对超过10k的数据进行压缩
                        deleteOriginalAssets: false, //是否删除原文件
                    }),
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            //生产环境自动删除console
                            compress: {
                                drop_debugger: true,
                                drop_console: true,
                                pure_funcs: ['console.log'],
                            },
                        },
                        sourceMap: false,
                        parallel: true,
                    }),
                ],
            }
        }
    },

    // 配置代理服务器，解决跨域问题
    devServer: {
        proxy: {
            '/api': {
                target: '线上接口地址',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/', // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果
                },
            },
        },
    },
    css: {
        // css预设器配置项
        loaderOptions: {
            less: {
                // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
                modifyVars: {
                    // 初始化可直接覆盖变量
                    'primary-color': '#1890FF',
                    'text-color': '#111',
                    'border-color': '#eee',
                    'nice-blue': '#f0f',
                },
                javascriptEnabled: true,
            },
        },
    },
}
